<template>
  <div id="bottom1" ref="root" style="height: 95%">
  </div>
</template>

<script>
import { Pie } from "@antv/g2plot";

export default {
  data(){
    return {}
  },
  methods:{
    myAntV(){
      const data = [
        { type: '建筑类', value: 20 },
        { type: '物流类', value: 25 },
        { type: '销售类', value: 15 },
        { type: '后勤类', value: 22 },
        { type: '市场类', value: 10 },
        { type: '其他', value: 8 },
      ];

      const piePlot = new Pie('bottom1', {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        autoFit:false,
        width:280,
        height:150,
        radius: 1,
        innerRadius: 0.64,
        meta: {
          value: {
            formatter: (v) => `${v}`,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            offsetY: -8,
            style: {
              fontSize: '15px',
            },
          },
          content: {
            offsetY: -4,
            style: {
              fontSize: '15px',
            }
          },
        },
        
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
              ],
            },
          },
        ],
      });
      piePlot.render();
    }
  },
  mounted(){
    this.myAntV();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
#bottom1{
  width: 280px;
  margin: 0 auto;
}
</style>
